<template>
	<view class="content">
		<!-- 页面背景 -->
		<view class="page_back"></view>
		<!--顶部导航-->
		<uni-nav-bar @clickLeft="onClickLeft" left-icon="back" left-color="#000" :statusBar="true" title="宝宝信息" backgroundColor="transparent" :border="false"></uni-nav-bar>
		
		<view class="bb_img_box">
			<image class="bb_img_img" :src="bb_img.boy"></image>
		</view>
		
		
		<view class="bb_input_box_name">
			<input placeholder="请填写宝宝名字/乳名" class="bb_name_input" placeholder-class="bb_name" />
		</view>
		
		<view class="bb_input_box_name" @click="VipBuyShow = true">
			
			<view class="bb_sex_choose_box">
				<view class="bb_sez_boy">
					<view class="sez_boy_img_box">
						<image class="boy_img" src="../../../static/img/bbxinxi/boy.png"></image>
					</view>
					<view class="sex_text">男宝宝</view>
				</view>
				
				<view class="shuxuian"></view>
				
				<view class="bb_sez_boy">
					<view class="sez_boy_img_box">
						<image class="boy_img" src="../../../static/img/bbxinxi/grill.png"></image>
					</view>
					<view class="sex_text">女宝宝</view>
				</view>
			</view>
		</view>
		
		<!-- 选择宝宝生日信息 -->
		<view class="bb_input_box_name1" @click="VipBuyShow = true">
			<view class="right_icon_box">
				<image class="right_next_img" src="../../../static/img/bbxinxi/xiangxia.png"></image>
			</view>
			<!-- {{date}} -->
			<input placeholder="请填写宝宝的生日" class="braday_input" placeholder-class="bb_name" />
			<!-- <view class="bb_name" type="primary" @click="DatePicker('date')">请填写宝宝的生日</view>
			<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'入住'" :end-text="'离店'" :show-seconds="true" @confirm="ed" @cancel="ed" /> -->
		</view>
		
		<view class="bb_input_box_name2">
			<view class="bb_tip_info">宝宝的生日填写后不可更改，请填写后核对确认</view>
		</view>
		
		
		<view class="save_button" @click="VipBuyShow = true">
			<view class="save_button_text">保存</view>
		</view>
		
		<!-- 会员到期弹窗提醒 起 -->
		<ZnDaoqi v-if="VipBuyShow"></ZnDaoqi>
		<!-- 会员到期弹窗提醒 终 -->
		
	</view>
</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	import ZnDaoqi from '@/pages/daoqi/daoqi.vue';
	    export default {
	        components: {
	            MxDatePicker,
				ZnDaoqi
	        },
	        data() {
	            return {
	                showPicker: false,
	                date: '2021/01/01',
	                time: '15:00:12',
	                datetime: '2021/01/01 15:00:12',
	                range: ['2021/01/01','2021/01/06'],
	                rangetime: ['2021/01/08 14:00','2021/01/16 13:59'],
	                type: 'rangetime',
	                value: '',
					bb_img:{
						'boy': '../../../static/img/bbxinxi/boyy.png',
						'gril': '../../../static/img/bbxinxi/gril.png'
					},
					VipBuyShow: false,//
	            }
	        },
	        methods: {
				onClickLeft(e){
					console.log(e);
					uni.navigateBack({
						delta: 1
					})
				},
	            DatePicker(type){//显示
	                this.type = type;
	                this.showPicker = true;
	                this.value = this[type];
	            },
	            ed(e) {//选择
	                this.showPicker = false;
	                if(e) {
	                    this[this.type] = e.value; 
	                    //选择的值
	                    console.log('value => '+ e.value);
	                    //原始的Date对象
	                    console.log('date => ' + e.date);
	                }
	            }
	        }
	    }
</script>

<style>
	page{
		background-color: #F6F6F6;
	}
	.page_back{
		z-index: -100;
		background: linear-gradient(180deg, #6EC5FF 0%, rgba(167, 228, 255, 0) 100%);
		opacity: 0.11;
		width: 100%;
		height: 913upx;
		position: absolute;
	}
	
	.bb_img_box{
		width: 292upx;
		height: 292upx;
		margin: 130upx auto 0 auto;
		border-radius: 50%;
	}
	.bb_img_img{
		border: 2upx solid #FFFFFF;
		/* box-sizing: border-box; */
		width: 292upx;
		height: 292upx;
		border-radius: 50%;
	}
	.bb_input_box_name{
		margin: 50upx auto 0 auto;
		background-color: #FFFFFF;
		width: 588upx;
		height: 104upx;
		border-radius: 67upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.bb_input_box_name1{
		position: relative;
		margin: 50upx auto 0 auto;
		background-color: #FFFFFF;
		width: 588upx;
		height: 104upx;
		border-radius: 67upx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
	}
	.bb_input_box_name2{
		margin: 22upx auto 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
	}
	.bb_name{
		/* text-align: center; */
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40upx;
	}
	
	.bb_sex_choose_box{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.bb_sez_boy{
		display: flex;
		align-items: center;
	}
	.sez_boy_img_box{
		width: 30upx;
		height: 30upx;
		/* background-color: #000000; */
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.boy_img{
		width: 30upx;
		height: 30upx;
	}
	.shuxuian{
		float:left;
		width: 2upx;
		height: 43upx; 
		background: #D8D8D8;
		margin:0 56upx;
	}
	.sex_text{
		width: 84upx;
		height: 40upx;
		margin-left: 10upx;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40upx;
	}
	.right_icon_box{
		position: absolute;
		width: 36upx;
		height: 20upx;
		right: 44upx;
		margin-top: auto;
		margin-bottom: auto;
		/* box-sizing: border-box; */
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.right_next_img{
		box-sizing: border-box;
		width: 36upx;
		height: 20upx;
	}
	.bb_tip_info{

		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 34upx;
	}
	.save_button{
		width: 620upx;
		height: 100upx;
		background: #CACACA;
		border-radius: 52upx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 100upx;
		left: 64upx;
		

		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 44upx;
	}
	.braday_input{
		text-align: center;
		/* background-color: #000000; */
	}
	.bb_name_input{
		text-align: center;
	}
</style>
